<%--
  Created by IntelliJ IDEA.
  User: 86137
  Date: 2021/8/2
  Time: 19:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>‍login</title>

    <script src="validate/jquery-1.11.0.min.js"></script>
    <script src="validate/jquery.validator.min.js"></script>
    <script src="validate/local/zh-CN.js"></script>
    <link href="validate/jquery.validator.css" rel="stylesheet">

    <style>
        table{line-height: 25px;}
    </style>


</head>
<body>
        <form id="login" action="${pageContext.request.contextPath}/userServlet?method=login" method="post">
            <table>
                <tr>
                    <td><label for="username">账号: </label></td>
                    <td><input type="text" size="12" name="username" id="username" /></td>
                </tr>

                <tr>
                    <td><label for="password">密码: </label></td>
                    <td><input type="password" size="12" name="password" id="password"/></td>
                </tr>

                <tr>
                    <td colspan="2"><img src="${pageContext.request.contextPath}/checkCode" title="看不清点击刷新" id="vcode"/></td>
                </tr>

                <tr>
                    <td><label for="checkCode">验证码: </label></td>
                    <td><input type="text" name="checkCode" id="checkCode" size="6" data-rule="验证码:required" /></td>
                </tr>
                        <tr>
                            <td colspan="2"><button type="submit">登录</button>&nbsp;&nbsp;
                                <button type="button" onclick="history.go(-1)">返回</button></td>
                        </tr>
                    <tr>
                        <td colspan="2"><strong> ${msg}</strong></td>
                    </tr>

            </table>
        </form>

<script>
        //获取图片标签，绑定单击事件
    document.getElementById("vcode").onclick=function () {
                    //修改图片标签的src属性值
        this.src="${pageContext.request.contextPath}/checkCode?"+new Date().getTime();
        //this：表示当前点击对象
    }

               /*onsubmit 当表单提交时触发事件*/
        document.getElementById("login").onsubmit=function () {
            //获取填写用户名和密码
           let username =document.getElementById("username").value;
          let password =document.getElementById("password").value;

            //判断用户名是否符合规则，4-16的纯字母和纯数字
            let reg1=/^[a-zA-Z0-9]{4,16}$/;
            if (!reg1.test(username)){
                alert("用户名不符合规则，请输入4-16的字母和数字");
                return false;
            }

            //判断密码是否符合规则， 6位纯数字
            let reg2=/^[\d]{6}$/;
            if (!reg2.test(password)) {
                alert("密码不符合规则，请输入6位纯数字的密码!");
                return false;
            }

            //如果所有条件都不满足，则提交表单
            return true;

        }



</script>




</body>
</html>
